<template>
	<div class="switcher">
		<button
			class="lang-toggle"
			@click="switchLanguage"
			:aria-label="$t('language_switcher.label')"
			type="button"
			:disabled="isChanging"
		>
			<span class="globe-icon">🌐</span>
			<span class="lang-text">{{ displayText }}</span>
		</button>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { lStorage } from '@/utils/storage'

const { locale, availableLocales: i18nLocales } = useI18n()
const currentLocale = ref(locale.value)
const isChanging = ref(false)

const languageOptions = [
	{ code: 'zh', name: '中文', shortName: '中文' },
	{ code: 'en', name: 'English', shortName: 'EN' },
]

const filteredLocales = computed(() => {
	return languageOptions.filter((lang) => i18nLocales.includes(lang.code))
})

const displayText = computed(() => {
	// 找到当前语言在列表中的索引
	const currentIndex = filteredLocales.value.findIndex(
		(lang) => lang.code === currentLocale.value
	)
	// 计算下一个语言的索引
	const nextIndex = (currentIndex + 1) % filteredLocales.value.length
	// 显示下一个可切换的语言
	const nextLang = filteredLocales.value[nextIndex]
	return nextLang?.shortName || 'EN'
})

const switchLanguage = () => {
	if (isChanging.value) return

	isChanging.value = true

	// 切换到下一个语言
	const currentIndex = filteredLocales.value.findIndex(
		(lang) => lang.code === currentLocale.value
	)
	const nextIndex = (currentIndex + 1) % filteredLocales.value.length
	const nextLanguage = filteredLocales.value[nextIndex]

	// 立即更新当前语言，这样显示文字会立即改变
	currentLocale.value = nextLanguage.code

	// 然后处理语言变化
	handleLanguageChange()
}

const handleLanguageChange = () => {
	try {
		locale.value = currentLocale.value
		lStorage.set('language', currentLocale.value)

		// 减少切换延迟
		setTimeout(() => {
			isChanging.value = false
		}, 150)
	} catch (error) {
		console.error('Language switch failed:', error)
		// 恢复之前的语言设置
		currentLocale.value = locale.value
		isChanging.value = false
	}
}

onMounted(() => {
	// 从本地存储恢复语言设置
	const savedLanguage = lStorage.get('language')
	if (savedLanguage && i18nLocales.includes(savedLanguage)) {
		currentLocale.value = savedLanguage
		locale.value = savedLanguage
	}
})
</script>

<style scoped>
.switcher {
	display: inline-block;
}

.lang-toggle {
	background: none;
	border: 1px solid;
	border-radius: 25px;
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 80px;
	justify-content: center;
	position: relative;

	/* 使用主题变量 */
	border-color: var(--theme-header-border);
	color: var(--theme-header-text-muted);

	&:hover {
		border-color: var(--theme-accent);
		color: var(--theme-accent);
		background: var(--theme-header-hover);
		transform: translateY(-1px);
	}

	&:active {
		transform: translateY(0) scale(0.98);
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 2px var(--theme-accent);
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		transform: none;
	}
}

.globe-icon {
	font-size: 16px;
	flex-shrink: 0;
}

.lang-text {
	font-weight: 600;
	white-space: nowrap;
	transition: all 0.3s ease;
}

/* 切换动画效果 */
.lang-toggle:active .lang-text {
	transform: scale(0.95);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.lang-toggle {
		padding: 6px 12px;
		font-size: 13px;
		min-width: 70px;
		gap: 6px;
	}

	.globe-icon {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.lang-toggle {
		padding: 6px 10px;
		font-size: 12px;
		min-width: 60px;
		gap: 4px;
	}

	.globe-icon {
		font-size: 12px;
	}
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
	.lang-toggle,
	.lang-text {
		transition: none;
	}

	.lang-toggle:hover {
		transform: none;
	}

	.lang-toggle:active {
		transform: none;
	}
}
</style>
